<template>
  <div class="container">
    <div class="box-sconed">

      <el-dialog
        :title="noticeContent.title"
        :visible.sync="noticeContent.dialogVisible"
        width="30%">
        <div>发布时间：{{ noticeContent.createTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</div>
        <hr/>
        <div>
          <div v-html="noticeContent.content" style="height: 400px ;overflow-y:auto;overflow-x:hidden;"></div>
        </div>

      </el-dialog>
      <div style="padding:20px;">
        <div style="display: flex;justify-content: space-between">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 10px;" @change="handleClick">
            <el-radio-button label="1">公告</el-radio-button>
            <el-radio-button label="2">消息</el-radio-button>
            <el-radio-button label="3">游戏活动</el-radio-button>
          </el-radio-group>

        </div>
        <div style="display: flex;justify-content: space-between; margin-bottom: 5px" v-for="(item,index) in promoteNoticeList"  :key="index"  @click="showNoticeContent(item.id)">
          <div class="box-sconed-text" >
            {{ item.title }}<span style="display: inline-block;
          padding: 2px 4px;color: #909399;margin-left: 5px;
          font-size: 8px;
           border: 1px solid #ccc; border-radius: 5px;" v-show="item.rdId != -1">已读</span></div>

          <div class="box-sconed-text">{{ item.createTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>

        <div class="block" style="margin-top: 20px;">

          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10,20, 50, 100, 200]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {detail, promoteNoticePage} from "@/api/notice/notice";

export default {
  name: "messageList",
  data() {
    return {
      tabPosition: '1',
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      noticeContent: {
        title: '',
        dialogVisible: false,
        content: '',
        createTime: '',
      },
      promoteNoticeList: [],

    };
  },

  computed: {
    ...mapGetters(["userInfo"]),
  },

  created() {
    this.promoteNoticePageData()
  },

  methods: {
    handleClick(tab, event) {
      this.tabPosition = tab
      console.log("111", tab, event);
      this.promoteNoticePageData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.promoteNoticePageData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.promoteNoticePageData()
    },

    showNoticeContent(id) {
      detail(id).then(res => {
        let data = res.data.data;
        this.noticeContent.content = data.content
        this.noticeContent.title = data.title
        this.noticeContent.createTime = data.createTime
        this.noticeContent.dialogVisible = true
        this.promoteNoticePageData()
      })
    },

    promoteNoticePageData() {
      promoteNoticePage(this.tabPosition, this.page.current, this.page.size).then(res => {
        let data = res.data.data;
        this.promoteNoticeList = data.records;
        this.page.total = data.total
      })
    }
  }

};
</script>

<style scoped lang="scss">

.container {
  padding: 6px 20px 20px 20px;
}

.box-sconed {
  margin-top: 12px;
  background-color: #FFFFFF;
  width: 100%;

}

.box-sconed-text {
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: #1e9fff;
}
</style>
